<template>
	<view>
		<view class="page-head">
			<view class="navbox">
				<view v-for="(item, index) in articleType" class="navitem"
					:class="{ active: article_category_id == item.id  }" @tap="changearticleType" :data-id="item.id">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="container">
			<template v-if="articleList.total > 0">
				<template v-for="(item, index) in articleList.data">
					<navigator :url="'/pages/article/info_detail/info_detail?id=' + item.id" class="news-item pt40 pb30"
						hover-class="none">
						<view class="flex-box mb40">
							<view class="flex-grow-1">
								<view class="mb25 fs32 col10 m-ellipsis-l2">{{item.name}}</view>
								<view class="fs24 col89 m-ellipsis">{{item.description}}</view>
							</view>

							<u--image :showLoading="true" :lazy-load="true" :src="item.image_text" radius="10rpx"
								width="240rpx" height="190rpx" mode="aspectFill"></u--image>

							<!-- 							<image class="img-news" src="/static/images/img_house.png" mode="aspectFill"></image>
 -->
						</view>
						<view class="flex-box fs24 col89">
							<image class="img-avatar mr20" :lazy-load="true" :src="item.author_avatar_text"
								mode="aspectFill">
							</image>
							<view class="mr30">{{ item.author }}</view>
							<view class="flex-grow-1">{{ item.createtime_text }}</view>
							<button class="flex-box btn-share" @tap.stop.prevent="share" :data-index="index">
								<image class="mr10" src="/static/icon/icon_share-b.png" mode="aspectFit"></image>
								<view class="fs24 col89">分享</view>
							</button>
						</view>
					</navigator>


				</template>
			</template>
			<template v-else>
				<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png"
					style="padding-top:20px ;">
				</u-empty>
			</template>
		</view>
		<navigator url="/pages/home/help_you/help_you" class="helpme df ac jc colf fs30" hover-class="none">
			<image src="/static/icon/icon_helpme.png" class="icon_helpme"></image>
			帮我找房
		</navigator>
		<l-painter isCanvasToTempFilePath @success="path = $event" custom-style="position: fixed; left: 200%"  :pixel-ratio="2" path-type="url"
			@progress="progress()" css="width: 600rpx; padding: 40rpx 30rpx; background: #fff;border-radius:12rpx">
			<l-painter-view css="position:relative">
				<l-painter-view css="margin-bottom: 20rpx; color: #101010; font-weight: bold; font-size: 34rpx; ">
					<l-painter-text text="分享一篇楼市好文" />
				</l-painter-view>
				<l-painter-view css="padding-bottom:30rpx">
					<l-painter-image :src="info.image_text"
						css="object-fit: cover; object-position: 50% 50%; width: 100%; height: 250rpx; border-radius: 12rpx;" />
				</l-painter-view>
				<l-painter-view css="margin-bottom: 20rpx; color: #101010; font-size: 30rpx;">
					<l-painter-text :text="info.name" css="line-clamp: 2;line-height: 1.8em;" />
				</l-painter-view>
				<l-painter-view css="margin-bottom: 20rpx; color: #898989; font-size: 24rpx;">
					<l-painter-text :text="info.description" css="line-clamp: 2;line-height: 1.8em;" />
				</l-painter-view>
				<l-painter-view css="padding-bottom:30rpx;font-size:24rpx;color:#898989;position:relative;">
					<l-painter-image :src="info.author_avatar_text"
						css="object-fit: cover; object-position: 50% 50%; width: 55rpx; height: 55rpx; border-radius: 50%;margin-right:20rpx;display:inline-block;" />
					<l-painter-view css="display:inline-block;width:170rpx;line-height:55rpx;">
						<l-painter-text :text="info.author" />
					</l-painter-view>
					<l-painter-view
						css="display:inline-block;line-height:55rpx;text-align:right;position:absolute;right:0;">
						<l-painter-text :text="info.createtime_text" />
					</l-painter-view>
				</l-painter-view>
				<l-painter-view css="width:540rpx;position:relative;">
					<l-painter-view css="font-size:24rpx;">
						<l-painter-image :src="app_logo"
							css="object-fit: cover; object-position: 50% 50%; width: 85rpx; height: 85rpx; border-radius: 50%;margin-bottom:13rpx" />
						<l-painter-text text="佳和房产" css="display:block;" />
					</l-painter-view>
					<l-painter-view
						css="position:absolute;right:90rpx;text-align:right;top:30rpx;font-size:20rpx;color:#898989;">
						<l-painter-text text="长按识别二维码" css="display:block;" />
						<l-painter-text text="阅读全文" css="display:block;" />
					</l-painter-view>
					<l-painter-view css="display:inline-block;position:absolute;right:-60rpx">
						<l-painter-image :src="share_qrcode" css="width: 130rpx; height: 130rpx;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>

		<u-popup :show="canvaspop" mode="center" closeable :safeAreaInsetBottom="false" @close="closemask"
			bgColor="transparent">
			<view class="canvaspop">
				<!-- #ifdef H5 -->
				<img :src="path" mode="widthFix" style="width: 100%;"></img>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image :src="path" mode="widthFix" style="width: 100%;"></image>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="flex-box flex-between btnbox">
					<!-- #ifdef MP -->
					<button open-type="share" class="btn">分享给好友</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button class="btn" @click="sharewx()">分享给好友</button>
					<!-- #endif -->
					<button class="btn" @click="saveImage()">保存分享海报</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="flex-box flex-center btnbox">
					<button class="btn">长按图片保存</button>
				</view>
				<!-- #endif -->
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				info: {},
				path: '',

				canvaspop: false,
				navIdx: 0,
				// 文章列表
				articleList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: [],
					per_page: 0
				},
				articleType: [],
				//文章分类
				article_category_id: 0,
				loadStatus: 'loadmore',
				share_qrcode: '',
				app_logo: '',
				share_qrcode: '',
				author_avatar: '',
				article_image: '',

			};
		},

		onShareAppMessage: function(res) {
			if (res.from == 'button') {
				if (this.menu == 0) {
					return {
						title: this.info.name,
						imageUrl: this.path,
						path: '/pages/article/info_detail/info_detail?id=' + this.info.id
					};
				} else {
					functions.dotask(this, 5);
					return {
						title: '佳和房产',
						path: '/pages/home/index/index'
					};
				}
			}
		},
		methods: {

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				var navidx = this.navIdx
				// 获取文章分类
				var json = {
					classify: 2
				};
				that.articleList.current_page = 0
				functions.getAjaxData('/api/xiluhouse/article/article_category_data', json, function(res) {
					that.articleType = res.data
					that.article_category_id = res.data[0].id
					// 获取该城市的房源列表
					if (!app.globalData.is_need_page_change) {
						that.getArticleList();
					}
				});

			},
			getArticleList: function() {
				var that = this
				var list = that.articleList
				var json = {
					classify: 2,
					article_category_id: that.article_category_id,
				}
				json.page = Number(list.current_page) + 1;

				if (json.page > 1 && list.current_page >= list.last_page) {
					functions.toast('已加载到底部了');
					that.changeloadStatus('nomore');
					return false;
				}
				that.changeloadStatus('loading');

				functions.getAjaxData(
					'/api/xiluhouse/article/article_list', json,
					function(res) {
						var loadingList = res.data;

						if (json.page > 1) {
							var now_loadingList_data = loadingList.data || [];
							var now_loadingList_data = now_loadingList_data.concat(loadingList.data);
							loadingList.data = now_loadingList_data;
						}
						console.log(loadingList)
						if (loadingList.current_page >= loadingList.last_page) {
							that.changeloadStatus('nomore');
						}

						that.articleList = loadingList
						console.log(that.articleList)
					}
				); // 获取---通用类-根据城市获取当前地铁数据

			},
			changeloadStatus(status) {

				this.loadStatus = status;


			},
			// 切换文章分类
			changearticleType(e) {
				this.sort = e.currentTarget.dataset.sort || 0;
				this.article_category_id = e.currentTarget.dataset.id || 0;
				this.menu = 0
				this.articleList.current_page = 0
				this.getArticleList();
			},
			sharemp() {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: app.globalData.config.app_logo,
					title: '佳和房产',
					miniProgram: {
						id: 'gh_632f774183ba',
						path: '/pages/home/index/index',
						type: 0,
						webUrl: app.globalData.web_url
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});
			},
			sharewx() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.path,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			saveImage() {
				functions.saveImages(this.path);
			},

			share(e) {
				let that = this;
				var index = e.currentTarget.dataset.index;
				var info = this.articleList.data[index];
				var id = info.id;
				this.info = info;
				this.app_logo = app.globalData.config.app_logo; // 获取---搜索数据

				functions.getAjaxData(
					'/api/xiluhouse/article/share_qrcode', {
						id: id
					},
					function(res) {
						that.share_qrcode = res.data
					}
				);
				that.canvaspop = true;
			},
			progress(e) {
				if (e > 0) {
					uni.hideLoading();
				}
			},
			closemask() {
				this.canvaspop = false;
			},

		},
		onLoad() {
			this.initData()
		},
		onShow() {
			if (app.globalData.is_need_page_change) {
				var param = app.globalData.pagesParam;
				app.globalData.is_need_page_change = false;

				if (param.nav) {
					this.menu = Number(param.nav) - 1
					this.initData();
				}
			}
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this;
			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			var listdata = this.articleList;
			if (listdata.current_page >= listdata.last_page) {
				this.changeloadStatus('nomore');
				return false;
			}
			this.getArticleList();
		},

	};
</script>

<style lang="scss" scoped>
	@import url('@/static/css/old_project.css');

	.page-head {
		background: #fff;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
	}

	.navbox {
		padding: 0 40rpx;
		white-space: nowrap;
		overflow-x: scroll;
		line-height: 115rpx;
		height: 115rp;
	}

	.navbox .navitem {
		position: relative;
		display: inline-block;
		font-size: 34rpx;
	}

	.navbox .navitem+.navitem {
		margin-left: 40rpx;
	}

	.navbox .navitem.active {
		color: #0091ff;
	}

	.navbox .navitem.active::after {
		content: '';
		display: block;
		width: 30rpx;
		height: 6rpx;
		border-radius: 50rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
		background: #0091ff;
	}

	.container {
		padding: 115rpx 40rpx 30rpx;
	}

	.news-item {
		border-bottom: 1rpx solid #f4f3f3;
	}

	.news-item .img-news {
		margin: 0 0 0 30rpx;
		display: block;
		width: 200rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.news-item .img-avatar {
		display: block;
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
	}

	.news-item .btn-share image {
		display: block;
		width: 40rpx;
		height: 40rpx;
	}

	.helpme {
		height: 90rpx;
		background: rgba(0, 0, 0, .6);
		border-radius: 50rpx 0 0 50rpx;
		position: fixed;
		right: 0;
		bottom: 173rpx;
		padding: 0 30rpx;
	}

	.helpme .icon_helpme {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.canvaspop {
		width: 600rpx;
	}

	.canvaspop .canvas {
		width: 600rpx;
		height: 863rpx;
		position: absolute;
		top: -9999px;
		right: -9999px;
	}

	.canvaspop .post {
		width: 600rpx;
		height: 863rpx;
		border-radius: 8rpx;
	}

	.canvaspop .btn {
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: var(--white);
		font-size: var(--fs30);
		text-align: center;
		font-weight: normal;
		border-radius: 8rpx;
		border: 1rpx solid var(--white);
		background: transparent;
		padding: 0;
		margin: 0;
	}

	.canvaspop .btnbox {
		padding: 40rpx 30rpx 0;
	}
</style>
